<template>
  <map
    id="map"
    style="width: 55vh; height: 100vh"
    :longitude="longitude"
    :latitude="latitude"
    scale="14"
    :markers="markers"
    :polyline="polyline"
    :show-location="true"
    @regionchange="regionchange"
    @markertap="markertap"
  >
    <View className="center">
      <nut-searchbar v-model="val">
        <template #leftout>
          <IconFont name="left" size="20" color="#333" />
        </template>
      </nut-searchbar>
    </View>
  </map>
</template>
  
  <script>
import Taro from "@tarojs/taro";
import { log } from "console";
import { ref, reactive, toRefs, onMounted } from "vue";
import { Search2, left, Photograph, Message } from '@nutui/icons-vue-taro'
import { IconFont } from '@nutui/icons-vue-taro'
const val = ref('')
let qqmapsdk;
var QQMapWX = require('../../plugins/qqmap-wx-jssdk.js');
export default {
  data() {
    return {
      longitude: 1,
      latitude: 2,
      markers: [],
      polyline: [],
    };
  },
  methods: {
    regionchange(e) {
      console.log(e.type);
    },
    markertap(e) {

      console.log("markertap:", e.detail);
    },
    getLocationInfo() {
      return new Promise((resolve, reject) => {
        Taro.getLocation({
            // 不同地图的引擎不一样，需要根据不同地图的引擎来选择
        //   type: "wgs84",//gps
          type: 'gcj02',//腾讯的
          success: function (res) {
            resolve(res); // 在获取位置信息成功时，通过 resolve 将 res 传递给 Promise 的 then 方法
          },
          fail: function (error) {
            reject(error); // 在获取位置信息失败时，通过 reject 抛出错误，供 catch 方法捕获
          },
        });
      }).then((res) => {
        return res;
      });
    },
    setArdessInfo(res) {
      this.latitude = res.latitude;
      this.longitude = res.longitude;
      this.markers = [  
        {
          iconPath:
            "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
          id: 0,
          // 上下
          latitude: res.latitude,
          // 左右
          longitude: res.longitude,
          width: 50,
          height: 50,
        },
      ];
      this.polyline = [
        {
          points: [

          ],
          color: "#FF0000DD",
          width: 5,
          dottedLine: true,
        },
      ];
    },
    onMarkerTap(e){
        console.log(e);
    },

  },
  created() {
     qqmapsdk = new QQMapWX({
            key: '2N2BZ-4QB6Z-7D7XS-7IYEY-W5NIJ-UIBWN'
        });



    this.getLocationInfo().then((res) => {
      console.log(res);
      this.setArdessInfo(res);
      return res;
    });
    Taro.choosePoi({
        latitude:this.latitude,
        longitude:this.longitude,
          success: function (res) {
            console.log(res);
          },
          fail: function (error) {
            reject(error);
          },
        });
  },
};
</script>